<template>
	<view>
		<view class="cinema-top">
			<view class="tops-item">
				<view class="cinema-img">
					<image :src="movieinfo.pic"></image>
				</view>
				<view class="cinema-info">
					<view class="top-name">{{movieinfo.filmName}}</view>
					<view class="list-tel">主演：{{movieinfo.cast}}</view>
					<view class="list-tel">时长：{{movieinfo.duration}}分钟</view>
				</view>
			</view>
		</view>
		<view class="cinema-main">
			<view class="support">
				<uni-icons type="close" size="12" color="#F03D38">不支持退票</uni-icons>
				<uni-icons type="close" size="12" color="#F03D38" style="margin-left: 20rpx;">不支持改签</uni-icons>
			</view>
			<view class="seat-item">
				<view class="seat-text">座位</view>
				<view class="seat-val">
					<view v-for="(value,index) in dataInfo.showInfor" :key="index">
						<text> {{value.seatName}}</text>
						<text v-if="index < dataInfo.showInfor.length - 1">，</text>
					</view>
				</view>
			</view>
			<view class="pirce-list">
				<view class="pirce-text">票价合计(共{{ lengths }}张）</view>
				<view class="pirce-valss">¥{{dataInfo.money}}</view>
			</view>
			<view class="lines"></view>
			<view class="order-phone-item">
				<view>手机号码</view>
				<input placeholder="请输入手机号码" type="number" class="phone-input" v-model="phone" maxlength="11"/>
			</view>
			<view class="lines"></view>
			<view class="ticket-notice">
				<view class="not-text">购票须知</view>
				<view class="not-list">
					<view class="list-num">1、</view>
					<view class="not-conot">购买成功后将<text>不可退款、改签</text>。支付前务必确认影院、影片、场次准备无误。</view>
				</view>
				<view class="not-list">
					<view class="list-num">2、</view>
					<view class="not-conot"><text>出票时间为9:00~23:30</text>,支付完成后20~60分钟完成出票，非出票时间的订单需等待至出票时间方可出票。</view>
				</view>
			</view>
			<view class="agreement">
				<uni-icons type="checkbox-filled" :color="such" size="24" @click="sure"></uni-icons>
				<text>我已阅读并同意购票须知</text>
			</view>
		</view>
		
		<view class="congirm-boom-nav">
			<view class="nav-lefts">
				<text class="shiji">实际付款</text>
				<text class="units">￥</text>
				<text class="shiji-val">{{dataInfo.money}}</text>
			</view>
			<view class="go-pay" @click="goPay">去支付</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow , onLoad } from '@dcloudio/uni-app';
	import { apiGetmodet , apiMvorder } from '@/api/upapi.js';
	
	const dataInfo = ref({});
	const movieinfo = ref({});
	const lengths = ref('');
	const phone = ref('');
	const seatIdinfo = ref('');
	const seatNameinfo = ref('');
	const such = ref('#a3a3a3');
	
	const sure = () => { such.value = such.value == '#a3a3a3' ? '#FE602B' : '#a3a3a3'; };
	const getDetail =async()=>{
		try {
			let res = await apiGetmodet({ filmId: dataInfo.value.filmId });
			if(res.data.result==0){
				movieinfo.value=res.data.object
			}else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const goPay =async()=>{
		const mervalue = uni.getStorageSync('xwmemberId');
		if(phone.value==''){ uni.showToast({ title:'请输入手机号码', icon:'none' }); return ; }
		let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57]|19[0-9]|16[0-9])[0-9]{8}$/;
		if(!reg.test(phone.value)){ uni.showToast({ title:'手机号码格式不正确', icon:'none' }); return; }
		if (such.value!='#FE602B') { uni.showToast({ title: '请同意购票须知',icon:'none'  }); return; }
		try {
			uni.showLoading({ title: '正在锁座中...', mask: true });
			let res = await apiMvorder({ 
				memberId:mervalue,
				merchant_id:133,
				tel: phone.value,
				seatNames:seatNameinfo.value,
				seatIds:seatIdinfo.value,
				showId:dataInfo.value.showId,
				filmId:dataInfo.value.filmId,
				sectionId:dataInfo.value.sectionId
			});
			uni.hideLoading();
			if(res.data.result==0){
				let dsxnfo = {
					orderPrice: res.data.object.orderPrice,
					orderSn: res.data.object.orderSn,
					orderStatus: res.data.object.orderStatus,
					outOrderSn: res.data.object.outOrderSn,
					showPrices: res.data.object.showPrice,
					filmName: movieinfo.value.filmName,
					zuowei: dataInfo.value.showInfor
				};
				const encodedData = encodeURIComponent(JSON.stringify(dsxnfo));
				uni.redirectTo({ url: `/pagesA/movie/pay?data=${encodedData}` });
			}else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			uni.hideLoading();
			console.error('获取数据失败', error);
		}
	};
	
	onLoad((option) => {
		dataInfo.value = JSON.parse(decodeURIComponent(option.data));
		lengths.value = dataInfo.value.showInfor.length;
		const seatIds = dataInfo.value.showInfor.map(item => item.seatId);
		const seatNames = dataInfo.value.showInfor.map(item => `${item.seatName}`);
		seatIdinfo.value=seatIds.join(',');
		seatNameinfo.value=seatNames.join(',');
		const info = uni.getStorageSync('xwmemberInfo');
		phone.value=info.tel;
		getDetail();
	});
</script>
<style>
	page{background-color: #fff;}
</style>
<style lang="less" scoped>
	.cinema-top{
		background-color: #636775;
		padding: 32rpx 32rpx 70rpx 32rpx;
		position: relative;
		.tops-item{
			display: flex;
			align-items: center;
			z-index: 9999;
		}
		.cinema-img{
			width: 160rpx;
			height: 222rpx;
			image{
				width: 160rpx;
				height: 222rpx;
				border-radius: 20rpx;
			}
		}
		.cinema-info{
			margin-left: 30rpx;
			.top-name{
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: 600;
			}
			.list-tel{
				color: #D8D8DD;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
	.cinema-main{
		position: absolute;
		top: 290rpx;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding-bottom: 120rpx;
	}
	.support{
		margin: 40rpx 32rpx 0rpx 32rpx;
		background-color: #FFEFEE;
		border-radius: 8rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
	}
	.seat-item{
		margin: 50rpx 32rpx 9rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		.seat-text{
			color: #636775;
		}
		.seat-val{
			color: #2D3039;
			display: flex;
			align-items: center;
		}
	}
	.pirce-list{
		padding: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		.pirce-text{
			color: #636775;
		}
		.pirce-val{
			color: #2D3039;
		}
		.pirce-vals{
			color: #FE602B;
		}
		.pirce-valss{
			color: #FE602B;
			font-weight: 550;
		}
	}
	.lines{
		height: 20rpx;
		background-color: #F3F4F7;
	}
	.order-phone-item{
		padding:20rpx 32rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.phone-input{
			font-size: 28rpx;
			width: 50%;
		}
	}
	.ticket-notice{
		padding: 40rpx 56rpx 40rpx 32rpx;
		background-color: #FFFFFF;
		.not-text{
			color: #2D3039;
			font-size: 28rpx;
			font-weight: 550;
		}
		.not-list{
			display: flex;
			margin-top: 20rpx;
			color: #636775;
			font-size: 28rpx;
			text{
				color: #F03D38;
				font-weight: 550;
			}
		}
	}
	.agreement{
		display: flex;
		align-items: center;
		background-color: #F2F5FA;
		padding: 24rpx 30rpx;
		text{
			color: #2D3039;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
	}
	.congirm-boom-nav{
		position: fixed;
		box-shadow: 0rpx 2rpx 8rpx 0rpx #00000029;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		z-index: 9999;
		padding-left: 48rpx;
		padding-right: 40rpx;
		.nav-lefts{
			display: flex;
			align-items: center;
			.shiji{
				color: #636775;
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.units{
				color: #FE602B;
				font-size: 28rpx;
				font-weight: 550;
				margin-left: 18rpx;
				margin-top: 4rpx;
			}
			.shiji-val{
				color: #FE602B;
				font-size: 42rpx;
				font-weight: 550;
			}
		}
		.go-pay{
			width: 230rpx;
			height: 92rpx;
			text-align: center;
			line-height: 92rpx;
			background-color: #FE602B;
			border-radius: 46rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
</style>
